import React, {useEffect, useState} from 'react'
import type {ColumnsType} from 'antd/es/table'
import {Button, message} from 'antd'
import {useHistory} from 'umi'
import moment from 'moment'
import {showStatusEnum, unShowStatusEnum} from './enum'
import {getOperatingGuideList} from '@/service/personal/operatingGuide'
import {removeModification, statusModification} from '@/service/personal'
import SearchForm from '@/components/SearchForm'
import CustomTable from '@/components/Table'
import styles from './index.less'

const formItemLayout = {
	labelCol: {flex: '80px'},
	wrapperCol: {flex: '1'},
}

export default function documentLists() {
	const history = useHistory()

	const [formData, setFormData] = useState({})
	const [total, setTotal] = useState()
	const [params, setParams] = useState<any>({
		current: 1,
		size: 10,
	})
	const [tableList, setTableList] = useState<any[]>([])
	const [loading, setLoading] = useState(false)

	const getTabelValue = async (value: any, pagination?: any) => {
		setLoading(true)
		let values = value
		if (values?.date) {
			values.createTime = moment(values.date[0]).format('YYYY-MM-DD')
			values.endTime = moment(values.date[1]).format('YYYY-MM-DD')
			delete values.date
		}
		setFormData(values)
		const newPagination = pagination || {
			current: 1,
			size: params?.size,
		}
		setParams(newPagination)
		values = {
			...values,
			...newPagination,
		}
		const res = await getOperatingGuideList(values)
		if (res?.data) {
			setTotal(res.data?.total || 0)
			if (res.data?.records) {
				setTableList(res.data?.records || [])
			}
		}
		setLoading(false)
	}

	useEffect(() => {
		getTabelValue(formData)
	}, [])

	const formItems: any[] = [
		{
			type: 'group',
			key: 'group1',
			groupItems: [
				{
					type: 'input',
					label: '文档编号',
					name: 'wordId',
					key: 'wordId',
				},
				{
					type: 'input',
					label: '文档标题',
					name: 'title',
					key: 'title',
				},
				{
					type: 'select',
					label: '文档状态',
					name: 'showStatus',
					key: 'showStatus',
					title: 'text',
					items: Object.keys(showStatusEnum).map((item: string) => ({
						value: item,
						text: showStatusEnum[item],
					})),
				},
			],
		},
		{
			type: 'group',
			key: 'group2',
			groupItems: [
				{
					type: 'input',
					label: '文档提交人',
					name: 'username',
					key: 'username',
				},
				{
					type: 'input',
					label: '提交人手机号',
					name: 'phone',
					key: 'phone',
				},
				{
					type: 'dateRange',
					label: '创建时间',
					name: 'date',
					key: 'date',
				},
			],
		},
	]

	const columns: ColumnsType<InitiationAPI.InitiationColumns> = [
		{
			title: '文档编号',
			dataIndex: 'wordId',
			align: 'center',
		},
		{
			title: '文档标题',
			dataIndex: 'title',
			align: 'center',
			render: (text: any) => <span>{text || '--'}</span>,
		},
		{
			title: '提交人',
			dataIndex: 'username',
			align: 'center',
		},
		{
			title: '提交人手机号',
			dataIndex: 'phone',
			align: 'center',
		},
		{
			title: '创建时间',
			dataIndex: 'createTime',
			align: 'center',
		},
		{
			title: '文档状态',
			dataIndex: 'showStatus',
			align: 'center',
			render: (text: string) => showStatusEnum[text],
		},
		{
			title: '文档排序',
			dataIndex: 'sort',
			align: 'center',
		},
		{
			title: '文档点赞',
			dataIndex: 'likeCount',
			align: 'center',
		},
		{
			title: '操作',
			key: 'action',
			align: 'center',
			fixed: 'right',
			width: 250,
			render: (text, record: any) => (
				<div>
					<Button
						type="link"
						onClick={() =>
							history.push({
								pathname: '/systemSetup/documentLists/editor',
								search: `id=${record?.id}`,
								state: record,
							})
						}>
						编辑
					</Button>
					<Button
						type="link"
						onClick={() => {
							statusModification({id: record?.id}).then((res) => {
								if (res.success) {
									message.success('修改成功')
									const newParams = JSON.parse(
										JSON.stringify(params),
									)
									// newParams.pageSize = params.size;
									// delete newParams.size;
									getTabelValue(formData, newParams)
								}
							})
						}}>
						{unShowStatusEnum[record?.showStatus]}
					</Button>
					<Button
						type="link"
						onClick={() => {
							removeModification({ids: record?.id}).then(
								(res: any) =>{
									if(res.success){
										message.success('删除成功')
									}
								}
							)
						}}>
						删除
					</Button>
				</div>
			),
		},
	]

	const onFinish = (values: any) => {
		getTabelValue(values)
		// eslint-disable-next-line no-param-reassign
	}

	// 搜索重置
	const onReset = () => {
		getTabelValue({})
	}
	return (
		<div className={styles.page}>
			<SearchForm
				onFinish={onFinish}
				onReset={onReset}
				formItems={formItems}
				formLayout={formItemLayout}
			/>
			<Button
				onClick={() => {
					history.push({
						pathname: '/systemSetup/documentLists/editor',
					})
				}}>
				添加
			</Button>
			<CustomTable
				params={params}
				scroll={{y: 480}}
				columns={columns}
				total={total}
				pagination
				callback={(pagination: any) => {
					getTabelValue(formData, pagination)
				}}
				loading={loading}
				dataSource={tableList}
			/>
		</div>
	)
}
